<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=no">
		<title>Marketing Kit - Mobile</title>
		<link rel="stylesheet" href="css/themes/Bootstrap.css">
		<link rel="stylesheet" href="css/jquery.mobile.structure-1.4.0.min.css" />
		<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
		<!-- Calender css -->
		<link rel="stylesheet" href="css/core.css" type="text/css" />
				
		<script src="js/jquery-1.8.2.min.js"></script>
		<script src="js/jquery.mobile-1.4.0.min.js"></script>
		<script src="js/jquery-ui-1.8.2.min.js" type="text/javascript" ></script>  	
    	<!-- <script src="js/jquery-1.3.min.js" type="text/javascript"></script> -->
	    <script src="js/jMonthCalendar.js" type="text/javascript"></script>
		
		<script type="text/javascript" src="cordova.js"></script>
		
		<style type="text/css" media="screen">
			#jMonthCalendar .Meeting { background-color: #b93127;}
			#jMonthCalendar .Birthday { background-color: #DD00FF;}
			#jMonthCalendar #Event_3 { background-color:#0000FF; }
		</style>
		
		<script>
			//global variable
			var version = localStorage.getItem('ls_lastversion');
			var compName = localStorage.getItem('ls_compname');
			var updateStatus = localStorage.getItem('ls_update');
			var compId = localStorage.getItem('ls_compid');
			
			$(document).ready(function(){
															
				$('#lableTitle').text(compName);						
				$('#labelGroup').text(getParam('cat_name'));		
				
				$("#btnBack").click(function(){
					$.mobile.loading( 'show', {
						text: 'Loading to back!',
						textVisible: true,
						theme: 'c',
						html: ""
					});
					
        			parent.history.back();
				});
				
				
				
				
				var options = {
					height:  $(window).height(),
					width: $(window).width(),
					navHeight: 25,
					labelHeight: 25,
					onMonthChanging: function(dateIn) {
						//this could be an Ajax call to the backend to get this months events
						//var events = [ 	{ "EventID": 7, "StartDate": new Date(2009, 1, 1), "Title": "10:00 pm - EventTitle1", "URL": "#", "Description": "This is a sample event description", "CssClass": "Birthday" },
						//				{ "EventID": 8, "StartDate": new Date(2009, 1, 2), "Title": "9:30 pm - this is a much longer title", "URL": "#", "Description": "This is a sample event description", "CssClass": "Meeting" }
						//];
						//$.jMonthCalendar.ReplaceEventCollection(events);
						return true;
					},
					onEventLinkClick: function(event) { 
						alert(event.Title + "\n\n" + event.Description);
						return true; 
					},
					onEventBlockClick: function(event) { 
						alert("block clicked");
						return true; 
					},
					onEventBlockOver: function(event) {
						//alert(event.Title + " - " + event.Description);
						return true;
					},
					onEventBlockOut: function(event) {
						return true;
					},
					onDayLinkClick: function(date) { 
						alert(date.toLocaleDateString());
						return true; 
					},
					onDayCellClick: function(date) { 
						alert(date.toLocaleDateString());
						return true; 
					}
				};
				getEventDB(options);
				
								
			});
			
			function dateFromString(dateString){
				var reggie = /(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})/;
				var dateArray = reggie.exec(dateString); 
				var dateObject = new Date(
				    (+dateArray[1]),
				    (+dateArray[2])-1, // Careful, month starts at 0!
				    (+dateArray[3]),
				    (+dateArray[4]),
				    (+dateArray[5]),
				    (+dateArray[6])
				);
				return dateObject;
			};
			
			function getParam( name ){
				name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");  
				var regexS = "[\\?&]"+name+"=([^&#]*)";  
				var regex = new RegExp( regexS );  
				var results = regex.exec( window.location.href ); 
				if( results == null )
					return "";  
				else
					return results[1];
			}
			
			function getEventDB(options){
				db = window.openDatabase("marketkit", "1.0", "Market Kit Database", 1000000);
				db.transaction(
						function(tx){
							var sql = 'select * from tb_calendar';
							//alert('sql cal:'+sql);
							tx.executeSql(sql, [], function (tx, result){
								
								var dbevents = [];
								for(var j=0; j<result.rows.length;j++){
									var obj = result.rows.item(j);
									
									var tempRow = {};
									tempRow['EventID']=j+1;
									tempRow['StartDateTime']=dateFromString(obj.dt_waktu);
									tempRow['Title']=obj.title;
									tempRow['Description']=obj.message;
									tempRow['URL']='#';
									tempRow['CssClass']='Meeting';
									dbevents.push(tempRow);
								}
								
								$.jMonthCalendar.Initialize(options, dbevents);
							});
						}, function(err){
							//alert('Err Calendar:'+err);
							
						}, function(){
						
						}
				);
			}
			
			
		</script>
	</head>
	<body>
		<div data-role="page" data-theme="c">
			<div data-role="header" data-position="fixed">
				<a href="#" id="btnBack" name="btnBack" data-icon="arrow-l" data-theme="c">Back</a>	
				<h1 id="lableTitle">Marketing Kit - Mobile</h1>
			</div>
			<center>
				<div id="jMonthCalendar"></div>						
			</center>
		</div>
	</body>
</html>